<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/layui/css/layui.css">
    <script src="static/jquery/jquery.js"></script>
    <script src="static/layui/layui.js"></script>
    <script src="static/layui/xm-select.js"></script>
    <style>
        .upload-group .upload-btn {
            height: 50px;
        }

        .upload-group .image-group {
            display: flex;
            flex-wrap: wrap;
        }

        .upload-group .image-group .image-item {
            height: 110px;
            width: 110px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .upload-group .image-group .image-item:hover .img-opt {
            display: flex;
        }

        .upload-group .image-group .image-item .img-view {
            height: 100px;
            width: 100px;
            outline: 1px solid #333;
        }

        .upload-group .image-group .image-item .img-view img {
            display: block;
            height: 100%;
            width: 100%;
        }

        .upload-group .image-group .image-item .img-opt {
            height: 100%;
            width: 100%;
            position: absolute;
            background-color: rgba(255, 255, 255, .5);
            display: none;
            align-items: center;
            justify-content: center;
        }


        .upload-group .image-group .image-item .img-opt i {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            width: 40px;
            font-size: 20px;
            cursor: pointer;
        }

    </style>
</head>
<body>
<div style="width: 95%;margin: 5px auto">
    <form class="layui-form">
        <input type="hidden" name="userinfoId" value="${order.orderId}">
        <c:if test="${loginInfo.role==1}">
            <div class="layui-form-item">
                <label for="senderName" class="layui-form-label">发件人</label>
                <div class="layui-input-block">
                    <input type="text" value="${order.senderName}" name="senderName" id="senderName"
                           placeholder="收件人"
                           lay-verify="required" lay-reqtext="请填写收件人" class="layui-input">
                </div>
            </div>
        </c:if>
        <div class="layui-form-item">
            <label <%--for="receiver"--%> class="layui-form-label">发件地址</label>
            <div class="layui-input-block">
                <select name="senderProvince" id="sProvince" lay-filter="sProvinceSelect">
                </select>
                <select name="senderCity" id="sCity" lay-filter="sCitySelect">
                    <option value="">请选择市</option>
                </select>
                <select name="senderDistrict" id="sDistrict" lay-filter="sDistrictSelect">
                    <option value="">请选择区</option>
                </select>
                <div <%--class="layui-input-block"--%> style="width: 460px">
                    <input type="text" name="senderAddress" id="senderAddress" placeholder="详细地址"
                           autocomplete="off" value="${order.senderAddress}"
                           class="layui-input" style="width: 460px">
                </div>
            </div>
        </div>


        <label for="receiverName" class="layui-form-label">收件人</label>
        <div class="layui-input-block">
            <input type="text" value="${order.receiverName}" name="receiverName" id="receiverName"
                   placeholder="收件人"
                   lay-verify="required" lay-reqtext="请填写收件人" class="layui-input">
        </div>
        <div class="layui-form-item">
            <label <%--for="receiver"--%> class="layui-form-label">收件地址</label>
            <div class="layui-input-block">
                <select name="receiverProvince" id="rProvince" lay-filter="rProvinceSelect">
                </select>
                <select name="receiverCity" id="rCity" lay-filter="rCitySelect">
                    <option value="">请选择市</option>
                </select>
                <select name="receiverDistrict" id="rDistrict" lay-filter="rDistrictSelect">
                    <option value="">请选择区</option>
                </select>
                <div <%--class="layui-input-block"--%> style="width: 460px">
                    <input type="text" name="receiverAddress" id="receiverAddress" placeholder="详细地址"
                           autocomplete="off" value="${order.receiverAddress}"
                           class="layui-input" style="width: 460px">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="phone" class="layui-form-label">收件手机号</label>
            <!-- 手机号的验证规则  /^1\d{10}$/   1开头后面跟10个数字 -->
            <div class="layui-input-block">
                <input type="text" value="${order.receiverPhone}" name="receiverPhone" id="phone"
                       placeholder="收件人手机号"
                       lay-reqtext="请填写手机号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label <%--for="receiver"--%> class="layui-form-label">分类</label>
            <div class="layui-input-block">
                <select name="type" id="type" lay-filter="typeSelect">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button lay-submit class="layui-btn" lay-filter="update">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    var form;
    layui.use(function () {
        form = layui.form;
        const upload = layui.upload;
        loadSProvince();
        loadRProvince();
        loadType();
        form.on("submit(update)", function (data) {
            // JSP 生成的初始值，假设这些是服务器端传递给页面的变量
            var orderId = ${order.orderId != null ? order.orderId : 'null'}; // 使用三元运算符来避免空值
            var defaultSenderName = '${loginInfo.username}'; // 直接输出 username 的值

            // 检查 orderId 是否为 null，如果不是 null，则设置到 data.field
            if (orderId !== 'null') {
                data.field.orderId = orderId;
            }

            // 检查 data.field.senderName 是否为空或未定义，如果是，则设置默认发件人名称
            if (!data.field.senderName || data.field.senderName === '') {
                data.field.senderName = defaultSenderName;
            }
            $.ajax({
                url: "admin/order/update",
                data: data.field,
                method: "post",
                dataType: "json",
                success(res) {
                    if (res.code === 200) {
                        layer.msg('操作成功！', {icon: 1}, function () {
                            /*获取当前窗口的标记值*/
                            const index = parent.layer.getFrameIndex(window.name);
                            /*关闭窗口*/
                            parent.layer.close(index);
                            /*刷新list中的表格*/
                            parent.table.reloadData('dataTable')
                        });
                    } else {
                        layer.alert(res.msg, {icon: 2});
                    }
                },
                error(e) {
                    layer.alert('服务器睡着了', {icon: 6})
                    console.log(e)
                }
            })
            return false;
        });
        // 监听省变化以加载城市
        form.on('select(sProvinceSelect)', function (data) {
            var provinceId = data.value
            if (provinceId) {
                loadSCity(provinceId);
            } else {
                // 清除城市下拉列表
                $('#sCity').empty();
                $('#sCity').append('<option value="">请选择市</option>');
                form.render('select'); // 渲染下拉框
            }
        })
        form.on('select(rProvinceSelect)', function (data) {
            var provinceId = data.value
            if (provinceId) {
                loadRCity(provinceId);
            } else {
                // 清除城市下拉列表
                $('#rCity').empty();
                $('#rCity').append('<option value="">请选择市</option>');
                form.render('select'); // 渲染下拉框
            }
        })

        // 监听城市变化以加载地区
        form.on('select(sCitySelect)', function (data) {
            var cityId = data.value
            if (cityId) {
                loadSDistrict(cityId);
            } else {
                // 清除城市下拉列表
                $('#sDistrict').empty();
                $('#sDistrict').append('<option value="">请选择区</option>');
                form.render('select'); // 渲染下拉框
            }
        });
        form.on('select(rCitySelect)', function (data) {
            var cityId = data.value
            if (cityId) {
                loadRDistrict(cityId);
            } else {
                // 清除城市下拉列表
                $('#rDistrict').empty();
                $('#rDistrict').append('<option value="">请选择区</option>');
                form.render('select'); // 渲染下拉框
            }
        });
    })


    // 加载省份数据
    function loadSProvince() {
        $.ajax({
            url: 'admin/order/province', // 假设这是你的后端API地址
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                // 清空并重新填充省份下拉列表
                $('#sProvince').empty();
                $('#sProvince').append('<option value="">请选择省</option>');
                $.each(data.data, function (index, item) {
                    $('#sProvince').append('<option value="' + item.id + '">' + item.name + '</option>');
                });
                form.render('select'); // 渲染下拉框
            }
        });
    }

    function loadRProvince() {
        $.ajax({
            url: 'admin/order/province', // 假设这是你的后端API地址
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                // 清空并重新填充省份下拉列表
                $('#rProvince').empty();
                $('#rProvince').append('<option value="">请选择省</option>');
                $.each(data.data, function (index, item) {
                    $('#rProvince').append('<option value="' + item.id + '">' + item.name + '</option>');
                });
                form.render('select'); // 渲染下拉框
            }
        });
    }


    // 加载城市数据
    function loadSCity(provinceId) {
        $.ajax({
            url: 'admin/order/city/' + provinceId, // 假设这是你的后端API地址
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                // 清空并重新填充城市下拉列表
                $('#sCity').empty();
                $('#sCity').append('<option value="">请选择市</option>');
                $.each(data.data, function (index, item) {
                    $('#sCity').append('<option value="' + item.id + '">' + item.name + '</option>');
                });
                form.render('select'); // 渲染下拉框

            }
        });
    }

    function loadRCity(provinceId) {
        $.ajax({
            url: 'admin/order/city/' + provinceId, // 假设这是你的后端API地址
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                // 清空并重新填充城市下拉列表
                $('#rCity').empty();
                $('#rCity').append('<option value="">请选择市</option>');
                $.each(data.data, function (index, item) {
                    $('#rCity').append('<option value="' + item.id + '">' + item.name + '</option>');
                });
                form.render('select'); // 渲染下拉框

            }
        });
    }

    // 加载地区数据
    function loadSDistrict(cityId) {
        $.ajax({
            url: 'admin/order/district/' + cityId, // 假设这是你的后端API地址
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                // 清空并重新填充城市下拉列表
                $('#sDistrict').empty();
                $('#sDistrict').append('<option value="">请选择区</option>');
                $.each(data.data, function (index, item) {
                    $('#sDistrict').append('<option value="' + item.id + '">' + item.name + '</option>');
                });
                form.render('select'); // 渲染下拉框
            }
        });
    }

    function loadRDistrict(cityId) {
        $.ajax({
            url: 'admin/order/district/' + cityId, // 假设这是你的后端API地址
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                // 清空并重新填充城市下拉列表
                $('#rDistrict').empty();
                $('#rDistrict').append('<option value="">请选择区</option>');
                $.each(data.data, function (index, item) {
                    $('#rDistrict').append('<option value="' + item.id + '">' + item.name + '</option>');
                });
                form.render('select'); // 渲染下拉框
            }
        });
    }

    // 加载分类数据
    function loadType() {
        $.ajax({
            url: 'admin/order/type', // 假设这是你的后端API地址
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                console.log(data.data)
                $('#type').empty();
                $('#type').append('<option value="">请选择分类</option>');
                $.each(data.data, function (index, item) {
                    $('#type').append('<option value="' + item.typeId + '">' + item.name + '</option>');
                });
                form.render('select'); // 渲染下拉框
            }
        });
    }

    function setAvatar(fileName) {
        $("#avatar").val(fileName);
        if (fileName) {
            let $html = '<div class="image-item"><div class="img-view"><img src="static/upload/' + fileName + '" alt="' + fileName + '"></div><div class="img-opt"><i onclick="showImage(this)" title="查看原图" class="layui-icon layui-icon-search"></i><i onclick="delAvatar()" title="删除图片" class="layui-icon layui-icon-delete"></i></div></div>';
            $("#avatarImage").empty().append($html);
        } else {
            $("#avatarImage").empty();
        }

    }

    function delAvatar() {
        layer.confirm('确定删除该图片吗?', {icon: 3, title: "询问"}, function (index) {
            avatar = "";
            setAvatar(avatar);
            layer.close(index);
        })
    }

    function showImage(_this) {
        const fileName = $(_this).parents(".image-item").find('img').prop('alt')
        layer.photos({
            photos: {
                data: [{
                    alt: fileName,
                    src: 'static/upload/' + fileName
                }]
            }
        })
    }

</script>
</html>
